{% extends 'base.html' %}
{% load static %}

{% block title %}
    新增文章
{% endblock %}

{% block header_css %}
    <link rel="stylesheet" href="{% static 'css/index.css' %}">
    <link rel="stylesheet" href="{% static 'css/new-article.css' %}">
    <!-- markdown编辑器 -->
    <link rel="stylesheet" href="{% static 'js/editor-markdown/css/editormd.css' %}">
{% endblock %}

{% block header_js %}
    <script src="{% static 'js/editor-markdown/js/editormd.js' %}"></script>
{% endblock %}

{% block header %}
    <!-- 头部导航start -->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="{% url 'index' %}">主页</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">{{ request.user }}
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="{% url 'article:my-blogs' %}">我的博客</a></li>
{#                            <li><a href="{% url 'message:message' %}">消息中心</a></li>#}
{#                            <li><a href="{% url 'users:user-info' %}">个人信息</a></li>#}
{#                            <li><a href="{% url 'users:modify-password' %}">修改密码</a></li>#}
                            <li role="separator" class="divider"></li>
                            <li><a href="{% url 'users:logout' %}">退出登录</a></li>
                        </ul>
                    </li>
                </ul>
                {#                <div class="navbar-form navbar-right">#}
                {#                    <a href="#" class="glyphicon glyphicon-bell new-message" aria-hidden="true">#}
                {#                        <span class="badge">56</span>#}
                {#                    </a>#}
                {#                </div>#}
            </div>
        </div>
    </nav>
    <!-- 头部导航end -->
{% endblock %}

{% block container %}
    <!-- 中间内容部分start -->
    <div class="container-fluid" style="margin-top: 70px;">
        {% csrf_token %}
        <form>
            <div class="form-group">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="请输入文章标题" id="article-title"/>
                    <span class="input-group-addon nav-search" id="public-article">发布文章</span>
                </div>
            </div>
        </form>
        <div id="editormd">
            <textarea style="display:none;" placeholder="文章内容"></textarea>
        </div>
    </div>
    <!-- 中间内容部分end -->
    <!-- 发表文章的模态框 start -->
    <div class="modal fade" id="article-model" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">发表文章</h4>
                </div>
                <div class="modal-body">
                    <ul class="category-list clear">
                        <div class="category-title">选择分类</div>
                        {% for category in category_list %}
                            <li>
                                <input type="radio" name="category" id="category{{ category.id }}"
                                       value="{{ category.id }}"/>
                                <label for="category{{ category.id }}">{{ category.get_category_display }}</label>
                            </li>
                        {% endfor %}
                    </ul>
                    <div class="category-title">文章类型</div>
                    <select id="article-type">
                        {% for type in type_list %}
                            <option value="{{ type.id }}">{{ type.get_type_display }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="send-article">提交</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- 发表文章的模态框 end -->
    <!--博客添加成功提示 start-->
    <div class="modal fade" id="article-info" tabindex="0" role="dialog" aria-labelledby="articleInfo"
         aria-hidden="true">
        <div class="modal-dialog" style="width: 400px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="articleInfo">发表文章提示</h4>
                </div>
                <div class="modal-body">
                    博客添加成功
                </div>
                <div class="modal-footer">
                    <a class="btn btn-default" href="{% url 'article:new-article' %}">继续写文章</a>
                    <a class="btn btn-primary" href="{% url 'index' %}">返回首页</a>
                </div>
            </div>
        </div>
    </div>
    <!--博客添加成功提示 end-->
{% endblock %}

{% block footer %}
    <script src="{% static 'js/editor-markdown/plugins/image-dialog-qiniu/image-dialog-qiniu.js' %}"></script>
    <script type="text/javascript">
        window.editor = editormd("editormd", {
            width: "100%",
            height: 540,
            syncScrolling: "single",
            path: "{% static 'js/editor-markdown/lib/' %}",
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            saveHTMLToTextarea: true,
            // previewTheme: "dark", // 主题
            toolbarIcons: function () {
                return [
                    "undo", "redo", "bold", "del", "italic", "hr", "|",
                    "h1", "h2", "h3", "h4", "h5", "h6", "list-ul", "list-ol", "|",
                    "link", "reference-link", "qiniu", "table", "code", "code-block", "datetime", "|",
                    "goto-line", "preview", "watch", "|",
                    "clear", "search"];
            },
            //配置七牛上传插件
            toolbarIconsClass: {
                qiniu: "fa-cloud-upload"
            },
            toolbarHandlers: {
                qiniu: function (cm, icon, cursor, selection) {
                    this.imageDialogQiniu();
                }
            },
            qiniuTokenUrl: "{% url 'article:qiniu-token' %}",          //本地服务器获取七牛token的url
            qiniuPublishUrl: "http://pdc7jra0s.bkt.clouddn.com/"    //远程七牛服务器个人发布地址
        });
    </script>
    <script src="{% static 'js/utils/utils.js' %}"></script>
    <script src="{% static 'js/new-article.js' %}"></script>
{% endblock %}